<!DOCTYPE HTML>
<html style="width:100%;height: 100%;">
<head>
    <meta charset="utf-8">
    <meta http-equiv="Content-Security-Policy" content="upgrade-insecure-requests"/>
    <meta name="keywords" content="katago,围棋,卡塔狗,leela,leelazero,alphago,围棋复盘" />
    <meta name="description" content="在线阅读sgf棋谱" />
    <meta content="yes" name="apple-mobile-web-app-capable" />
    <meta content="telephone=no,email=no" name="format-detection" />
    <meta content="yes" name="apple-mobile-web-app-capable" />
    <meta name="apple-mobile-web-app-title" content="katago"/>
    <meta name="apple-itunes-app" content="app-id=1509047602">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>围棋复盘阅读器</title>

    <script>
        function getQueryVariable(variable)
{
    var query = window.location.search.substring(1);
       var vars = query.split("&");
       for (var i=0;i<vars.length;i++) {
               var pair = vars[i].split("=");
               if(pair[0] == variable){return pair[1];}
       }
       return(false);

}
window.onload = function () {
  var  value = getQueryVariable("id")
    if (value){
        var o1 = document.getElementById("main");
    o1.setAttribute("data-wgo",  "sgf/"+value + ".sgf");
    var o2 = document.getElementById("main4");
    o2.setAttribute("href", "sgf/"+value + ".sgf");
    var o3 = document.getElementById("main2");
     o3.setAttribute("href","sgf/"+value+ ".sgf");
    o3.setAttribute("download", "sgf/"+value+".sgf");
    } else {
      var  urls = getQueryVariable("url")
        var o1 = document.getElementById("main");
    o1.setAttribute("data-wgo",  urls );
    var o2 = document.getElementById("main4");
    o2.setAttribute("href", urls );
    var o3 = document.getElementById("main2");
     o3.setAttribute("href",urls);
    o3.setAttribute("download", urls);
    }
    
}
    </script>
    <!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-15892875-24"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());

  gtag('config', 'UA-15892875-24');
</script>
<script>
    var _hmt = _hmt || [];
    (function() {
      var hm = document.createElement("script");
      hm.src = "https://hm.baidu.com/hm.js?8a84daa429f2f30dc35352e1cfa989d7";
      var s = document.getElementsByTagName("script")[0]; 
      s.parentNode.insertBefore(hm, s);
    })();
    </script>
    <script type="text/javascript" src="wgo/wgo.js"></script>
    <script type="text/javascript" src="wgo/kifu.js"></script>
    <script type="text/javascript" src="wgo/sgfparser.js"></script>
    <script type="text/javascript" src="wgo/player.js"></script>
    <script type="text/javascript" src="wgo/basicplayer.js"></script>
    <script type="text/javascript" src="wgo/basicplayer.component.js"></script>
    <script type="text/javascript" src="wgo/basicplayer.infobox.js"></script>
    <script type="text/javascript" src="wgo/basicplayer.commentbox.js"></script>
    <script type="text/javascript" src="wgo/basicplayer.control.js"></script>
    <script type="text/javascript" src="wgo/player.editable.js"></script>
    <script type="text/javascript" src="wgo/player.maker.js"></script>
    <script type="text/javascript" src="wgo/scoremode.js"></script>
<!--    <script type="text/javascript" src="wgo/player.permalink.js"></script>-->
    <script type="text/javascript" src="wgo/i18n.zh.js"></script>
    <script type="text/javascript" src="wgo/Table.js"></script>
    <script type="text/javascript" src="wgo/jquery-3.1.1.min.js"></script>
    <script type="text/javascript" src="wgo/clipboard.js"></script>
    <script>
        function IsPC() {
            // var userAgentInfo = navigator.userAgent;
            // var Agents = ["Android", "iPhone",
            //     "SymbianOS", "Windows Phone",
            //     "iPad"];
            // var flag = true;
            // for (var v = 0; v < Agents.length; v++) {
            //     if (userAgentInfo.indexOf(Agents[v]) > 0) {
            //         flag = false;
            //         break;
            //     }
            // }
            // return flag;
            //平台、设备和操作系统
            var system ={
                win : false,
                mac : false,
                xll : false
            };

            //检测平台
            var p = navigator.platform;
            system.win = p.indexOf("Win") == 0;
            // system.mac = p.indexOf("Mac") == 0;
            system.x11 = (p == "X11") || (p.indexOf("Linux") == 0);
// alert(p)
            //跳转语句
            if(system.win||system.mac||system.xll){//转向后台登陆页面
             return true;
            }else{
                return false;
            }
        }

        var isPC = IsPC();
        WGo.isPC = isPC;
        if (isPC) {
            document.write('<link rel="stylesheet" type="text/css" href="wgo/wgo.player.css"/>');
        } else {
            var devicewidth = document.documentElement.clientWidth;
            var deviceheight = document.documentElement.clientHeight;
            if (deviceheight > devicewidth)
                document.write('<link rel="stylesheet" type="text/css" href="wgo/wgo.player.cellphone.css"/>');
            else
                document.write('<link rel="stylesheet" type="text/css" href="wgo/wgo.player.css"/>');
        }
        // var w=screen.width;
        // var h=screen.height;
        // if(w<h)document.write('<link rel="stylesheet" type="text/css" href="wgo/wgo.player.cellphone.css"/>');
        // else document.write('<link rel="stylesheet" type="text/css" href="wgo/wgo.player.css"/>');


    </script>

    <!--	<script>-->
    <!--		// window.onload=function () {-->
    <!--		// 	var maindiv = document.getElementById("main");-->
    <!--		// 	 var mainh = maindiv.offsetHeight; //高度-->
    <!--		// 	 var mainw = maindiv.offsetWidth; //宽度-->
    <!--		// 	 var scale=mainh/900;-->
    <!--		// 	maindiv.style.height = (900) + "px";-->
    <!--		// 	maindiv.style.width = (mainw/scale)+"px";-->
    <!--		// }-->
    <!--	</script>-->
    <style>
        /*!
         * Bootstrap v2.3.2
         *
         * Copyright 2013 Twitter, Inc
         * Licensed under the Apache License v2.0
         * http://www.apache.org/licenses/LICENSE-2.0
         *
         * Designed and built with all the love in the world @twitter by @mdo and @fat.
         */
        .clearfix {
            *zoom: 1;
        }

        .clearfix:before, .clearfix:after {
            display: table;
            content: "";
            line-height: 0;
        }

        .clearfix:after {
            clear: both;
        }

        .hide-text {
            font: 0/0 a;
            color: transparent;
            text-shadow: none;
            background-color: transparent;
            border: 0;
        }

        .input-block-level {
            display: block;
            width: 100%;
            min-height: 30px;
            -webkit-box-sizing: border-box;
            -moz-box-sizing: border-box;
            box-sizing: border-box;
        }

        article, aside, details, figcaption, figure, footer, header, hgroup, nav, section {
            display: block;
        }

        audio, canvas, video {
            display: inline-block;
            *display: inline;
            *zoom: 1;
        }

        audio:not([controls]) {
            display: none;
        }

        html {
            font-size: 100%;
            -webkit-text-size-adjust: 100%;
            -ms-text-size-adjust: 100%;
        }

        a:focus {
            outline: thin dotted #333;
            outline: 5px auto -webkit-focus-ring-color;
            outline-offset: -2px;
        }

        a:hover, a:active {
            outline: 0;
        }

        sub, sup {
            position: relative;
            font-size: 75%;
            line-height: 0;
            vertical-align: baseline;
        }

        sup {
            top: -0.5em;
        }

        sub {
            bottom: -0.25em;
        }

        img {
            max-width: 100%;
            width: auto \9;
            height: auto;
            vertical-align: middle;
            border: 0;
            -ms-interpolation-mode: bicubic;
        }

        #map_canvas img, .google-maps img {
            max-width: none;
        }

        button, input, select, textarea {
            margin: 0;
            font-size: 100%;
            vertical-align: middle;
        }

        button, input {
            *overflow: visible;
            line-height: normal;
        }

        button::-moz-focus-inner, input::-moz-focus-inner {
            padding: 0;
            border: 0;
        }

        button, html input[type="button"], input[type="reset"], input[type="submit"] {
            -webkit-appearance: button;
            cursor: pointer;
        }

        label, select, button, input[type="button"], input[type="reset"], input[type="submit"], input[type="radio"], input[type="checkbox"] {
            cursor: pointer;
        }

        input[type="search"] {
            -webkit-box-sizing: content-box;
            -moz-box-sizing: content-box;
            box-sizing: content-box;
            -webkit-appearance: textfield;
        }

        input[type="search"]::-webkit-search-decoration, input[type="search"]::-webkit-search-cancel-button {
            -webkit-appearance: none;
        }

        textarea {
            overflow: auto;
            vertical-align: top;
        }

        @media print {
            * {
                text-shadow: none !important;
                color: #000 !important;
                background: transparent !important;
                box-shadow: none !important;
            }

            a, a:visited {
                text-decoration: underline;
            }

            a[href]:after {
                content: " (" attr(href) ")";
            }

            abbr[title]:after {
                content: " (" attr(title) ")";
            }

            .ir a:after, a[href^="javascript:"]:after, a[href^="#"]:after {
                content: "";
            }

            pre, blockquote {
                border: 1px solid #999;
                page-break-inside: avoid;
            }

            thead {
                display: table-header-group;
            }

            tr, img {
                page-break-inside: avoid;
            }

            img {
                max-width: 100% !important;
            }

            @page {
                margin: 0.5cm;
            }

            p, h2, h3 {
                orphans: 3;
                widows: 3;
            }

            h2, h3 {
                page-break-after: avoid;
            }
        }

        body {
            margin: 0;
            font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
            font-size: 14px;
            line-height: 20px;
            color: #333333;
            background-color: #ffffff;
        }

        a {
            color: #0088cc;
            text-decoration: none;
        }

        a:hover, a:focus {
            color: #005580;
            text-decoration: underline;
        }

        .img-rounded {
            -webkit-border-radius: 6px;
            -moz-border-radius: 6px;
            border-radius: 6px;
        }

        .img-polaroid {
            padding: 4px;
            background-color: #fff;
            border: 1px solid #ccc;
            border: 1px solid rgba(0, 0, 0, 0.2);
            -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
            -moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
            box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
        }

        .img-circle {
            -webkit-border-radius: 500px;
            -moz-border-radius: 500px;
            border-radius: 500px;
        }

        .row {
            margin-left: -20px;
            *zoom: 1;
        }

        .row:before, .row:after {
            display: table;
            content: "";
            line-height: 0;
        }

        .row:after {
            clear: both;
        }

        [class*="span"] {
            float: left;
            min-height: 1px;
            margin-left: 20px;
        }

        .container, .navbar-static-top .container, .navbar-fixed-top .container, .navbar-fixed-bottom .container {
            width: 940px;
        }

        .span12 {
            width: 940px;
        }

        .span11 {
            width: 860px;
        }

        .span10 {
            width: 780px;
        }

        .span9 {
            width: 700px;
        }

        .span8 {
            width: 620px;
        }

        .span7 {
            width: 540px;
        }

        .span6 {
            width: 460px;
        }

        .span5 {
            width: 380px;
        }

        .span4 {
            width: 300px;
        }

        .span3 {
            width: 220px;
        }

        .span2 {
            width: 140px;
        }

        .span1 {
            width: 60px;
        }

        .offset12 {
            margin-left: 980px;
        }

        .offset11 {
            margin-left: 900px;
        }

        .offset10 {
            margin-left: 820px;
        }

        .offset9 {
            margin-left: 740px;
        }

        .offset8 {
            margin-left: 660px;
        }

        .offset7 {
            margin-left: 580px;
        }

        .offset6 {
            margin-left: 500px;
        }

        .offset5 {
            margin-left: 420px;
        }

        .offset4 {
            margin-left: 340px;
        }

        .offset3 {
            margin-left: 260px;
        }

        .offset2 {
            margin-left: 180px;
        }

        .offset1 {
            margin-left: 100px;
        }

        .row-fluid {
            width: 100%;
            *zoom: 1;
        }

        .row-fluid:before, .row-fluid:after {
            display: table;
            content: "";
            line-height: 0;
        }

        .row-fluid:after {
            clear: both;
        }

        .row-fluid [class*="span"] {
            display: block;
            width: 100%;
            min-height: 30px;
            -webkit-box-sizing: border-box;
            -moz-box-sizing: border-box;
            box-sizing: border-box;
            float: left;
            margin-left: 2.127659574468085%;
            *margin-left: 2.074468085106383%;
        }

        .row-fluid [class*="span"]:first-child {
            margin-left: 0;
        }

        .row-fluid .controls-row [class*="span"] + [class*="span"] {
            margin-left: 2.127659574468085%;
        }

        .row-fluid .span12 {
            width: 100%;
            *width: 99.94680851063829%;
        }

        .row-fluid .span11 {
            width: 91.48936170212765%;
            *width: 91.43617021276594%;
        }

        .row-fluid .span10 {
            width: 82.97872340425532%;
            *width: 82.92553191489361%;
        }

        .row-fluid .span9 {
            width: 74.46808510638297%;
            *width: 74.41489361702126%;
        }

        .row-fluid .span8 {
            width: 65.95744680851064%;
            *width: 65.90425531914893%;
        }

        .row-fluid .span7 {
            width: 57.44680851063829%;
            *width: 57.39361702127659%;
        }

        .row-fluid .span6 {
            width: 48.93617021276595%;
            *width: 48.88297872340425%;
        }

        .row-fluid .span5 {
            width: 40.42553191489362%;
            *width: 40.37234042553192%;
        }

        .row-fluid .span4 {
            width: 31.914893617021278%;
            *width: 31.861702127659576%;
        }

        .row-fluid .span3 {
            width: 23.404255319148934%;
            *width: 23.351063829787233%;
        }

        .row-fluid .span2 {
            width: 14.893617021276595%;
            *width: 14.840425531914894%;
        }

        .row-fluid .span1 {
            width: 6.382978723404255%;
            *width: 6.329787234042553%;
        }

        .row-fluid .offset12 {
            margin-left: 104.25531914893617%;
            *margin-left: 104.14893617021275%;
        }

        .row-fluid .offset12:first-child {
            margin-left: 102.12765957446808%;
            *margin-left: 102.02127659574467%;
        }

        .row-fluid .offset11 {
            margin-left: 95.74468085106382%;
            *margin-left: 95.6382978723404%;
        }

        .row-fluid .offset11:first-child {
            margin-left: 93.61702127659574%;
            *margin-left: 93.51063829787232%;
        }

        .row-fluid .offset10 {
            margin-left: 87.23404255319149%;
            *margin-left: 87.12765957446807%;
        }

        .row-fluid .offset10:first-child {
            margin-left: 85.1063829787234%;
            *margin-left: 84.99999999999999%;
        }

        .row-fluid .offset9 {
            margin-left: 78.72340425531914%;
            *margin-left: 78.61702127659572%;
        }

        .row-fluid .offset9:first-child {
            margin-left: 76.59574468085106%;
            *margin-left: 76.48936170212764%;
        }

        .row-fluid .offset8 {
            margin-left: 70.2127659574468%;
            *margin-left: 70.10638297872339%;
        }

        .row-fluid .offset8:first-child {
            margin-left: 68.08510638297872%;
            *margin-left: 67.9787234042553%;
        }

        .row-fluid .offset7 {
            margin-left: 61.70212765957446%;
            *margin-left: 61.59574468085106%;
        }

        .row-fluid .offset7:first-child {
            margin-left: 59.574468085106375%;
            *margin-left: 59.46808510638297%;
        }

        .row-fluid .offset6 {
            margin-left: 53.191489361702125%;
            *margin-left: 53.085106382978715%;
        }

        .row-fluid .offset6:first-child {
            margin-left: 51.063829787234035%;
            *margin-left: 50.95744680851063%;
        }

        .row-fluid .offset5 {
            margin-left: 44.68085106382979%;
            *margin-left: 44.57446808510638%;
        }

        .row-fluid .offset5:first-child {
            margin-left: 42.5531914893617%;
            *margin-left: 42.4468085106383%;
        }

        .row-fluid .offset4 {
            margin-left: 36.170212765957444%;
            *margin-left: 36.06382978723405%;
        }

        .row-fluid .offset4:first-child {
            margin-left: 34.04255319148936%;
            *margin-left: 33.93617021276596%;
        }

        .row-fluid .offset3 {
            margin-left: 27.659574468085104%;
            *margin-left: 27.5531914893617%;
        }

        .row-fluid .offset3:first-child {
            margin-left: 25.53191489361702%;
            *margin-left: 25.425531914893618%;
        }

        .row-fluid .offset2 {
            margin-left: 19.148936170212764%;
            *margin-left: 19.04255319148936%;
        }

        .row-fluid .offset2:first-child {
            margin-left: 17.02127659574468%;
            *margin-left: 16.914893617021278%;
        }

        .row-fluid .offset1 {
            margin-left: 10.638297872340425%;
            *margin-left: 10.53191489361702%;
        }

        .row-fluid .offset1:first-child {
            margin-left: 8.51063829787234%;
            *margin-left: 8.404255319148938%;
        }

        [class*="span"].hide, .row-fluid [class*="span"].hide {
            display: none;
        }

        [class*="span"].pull-right, .row-fluid [class*="span"].pull-right {
            float: right;
        }

        .container {
            margin-right: auto;
            margin-left: auto;
            *zoom: 1;
        }

        .container:before, .container:after {
            display: table;
            content: "";
            line-height: 0;
        }

        .container:after {
            clear: both;
        }

        .container-fluid {
            padding-right: 20px;
            padding-left: 20px;
            *zoom: 1;
        }

        .container-fluid:before, .container-fluid:after {
            display: table;
            content: "";
            line-height: 0;
        }

        .container-fluid:after {
            clear: both;
        }

        p {
            margin: 0 0 10px;
        }

        .lead {
            margin-bottom: 20px;
            font-size: 21px;
            font-weight: 200;
            line-height: 30px;
        }

        small {
            font-size: 85%;
        }

        strong {
            font-weight: bold;
        }

        em {
            font-style: italic;
        }

        cite {
            font-style: normal;
        }

        .muted {
            color: #999999;
        }

        a.muted:hover, a.muted:focus {
            color: #808080;
        }

        .text-warning {
            color: #c09853;
        }

        a.text-warning:hover, a.text-warning:focus {
            color: #a47e3c;
        }

        .text-error {
            color: #b94a48;
        }

        a.text-error:hover, a.text-error:focus {
            color: #953b39;
        }

        .text-info {
            color: #3a87ad;
        }

        a.text-info:hover, a.text-info:focus {
            color: #2d6987;
        }

        .text-success {
            color: #468847;
        }

        a.text-success:hover, a.text-success:focus {
            color: #356635;
        }

        .text-left {
            text-align: left;
        }

        .text-right {
            text-align: right;
        }

        .text-center {
            text-align: center;
        }

        h1, h2, h3, h4, h5, h6 {
            margin: 10px 0;
            font-family: inherit;
            font-weight: bold;
            line-height: 20px;
            color: inherit;
            text-rendering: optimizelegibility;
        }

        h1 small, h2 small, h3 small, h4 small, h5 small, h6 small {
            font-weight: normal;
            line-height: 1;
            color: #999999;
        }

        h1, h2, h3 {
            line-height: 40px;
        }

        h1 {
            font-size: 38.5px;
        }

        h2 {
            font-size: 31.5px;
        }

        h3 {
            font-size: 24.5px;
        }

        h4 {
            font-size: 17.5px;
        }

        h5 {
            font-size: 14px;
        }

        h6 {
            font-size: 11.9px;
        }

        h1 small {
            font-size: 24.5px;
        }

        h2 small {
            font-size: 17.5px;
        }

        h3 small {
            font-size: 14px;
        }

        h4 small {
            font-size: 14px;
        }

        .page-header {
            padding-bottom: 9px;
            margin: 20px 0 30px;
            border-bottom: 1px solid #eeeeee;
        }

        ul, ol {
            padding: 0;
            margin: 0 0 10px 25px;
        }

        ul ul, ul ol, ol ol, ol ul {
            margin-bottom: 0;
        }

        li {
            line-height: 20px;
        }

        ul.unstyled, ol.unstyled {
            margin-left: 0;
            list-style: none;
        }

        ul.inline, ol.inline {
            margin-left: 0;
            list-style: none;
        }

        ul.inline > li, ol.inline > li {
            display: inline-block;
            *display: inline;
            *zoom: 1;
            padding-left: 5px;
            padding-right: 5px;
        }

        dl {
            margin-bottom: 20px;
        }

        dt, dd {
            line-height: 20px;
        }

        dt {
            font-weight: bold;
        }

        dd {
            margin-left: 10px;
        }

        .dl-horizontal {
            *zoom: 1;
        }

        .dl-horizontal:before, .dl-horizontal:after {
            display: table;
            content: "";
            line-height: 0;
        }

        .dl-horizontal:after {
            clear: both;
        }

        .dl-horizontal dt {
            float: left;
            width: 160px;
            clear: left;
            text-align: right;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }

        .dl-horizontal dd {
            margin-left: 180px;
        }

        hr {
            margin: 20px 0;
            border: 0;
            border-top: 1px solid #eeeeee;
            border-bottom: 1px solid #ffffff;
        }

        abbr[title], abbr[data-original-title] {
            cursor: help;
            border-bottom: 1px dotted #999999;
        }

        abbr.initialism {
            font-size: 90%;
            text-transform: uppercase;
        }

        blockquote {
            padding: 0 0 0 15px;
            margin: 0 0 20px;
            border-left: 5px solid #eeeeee;
        }

        blockquote p {
            margin-bottom: 0;
            font-size: 17.5px;
            font-weight: 300;
            line-height: 1.25;
        }

        blockquote small {
            display: block;
            line-height: 20px;
            color: #999999;
        }

        blockquote small:before {
            content: '\2014 \00A0';
        }

        blockquote.pull-right {
            float: right;
            padding-right: 15px;
            padding-left: 0;
            border-right: 5px solid #eeeeee;
            border-left: 0;
        }

        blockquote.pull-right p, blockquote.pull-right small {
            text-align: right;
        }

        blockquote.pull-right small:before {
            content: '';
        }

        blockquote.pull-right small:after {
            content: '\00A0 \2014';
        }

        q:before, q:after, blockquote:before, blockquote:after {
            content: "";
        }

        address {
            display: block;
            margin-bottom: 20px;
            font-style: normal;
            line-height: 20px;
        }

        @-ms-viewport {
            width: device-width;
        }

        .hidden {
            display: none;
            visibility: hidden;
        }

        .visible-phone {
            display: none !important;
        }

        .visible-tablet {
            display: none !important;
        }

        .hidden-desktop {
            display: none !important;
        }

        .visible-desktop {
            display: inherit !important;
        }

        @media (min-width: 768px) and (max-width: 979px) {
            .hidden-desktop {
                display: inherit !important;
            }

            .visible-desktop {
                display: none !important;
            }

            .visible-tablet {
                display: inherit !important;
            }

            .hidden-tablet {
                display: none !important;
            }
        }

        @media (max-width: 767px) {
            .hidden-desktop {
                display: inherit !important;
            }

            .visible-desktop {
                display: none !important;
            }

            .visible-phone {
                display: inherit !important;
            }

            .hidden-phone {
                display: none !important;
            }
        }

        .visible-print {
            display: none !important;
        }

        @media print {
            .visible-print {
                display: inherit !important;
            }

            .hidden-print {
                display: none !important;
            }
        }

        @media (max-width: 767px) {
            body {
                padding-left: 20px;
                padding-right: 20px;
            }

            .navbar-fixed-top, .navbar-fixed-bottom, .navbar-static-top {
                margin-left: -20px;
                margin-right: -20px;
            }

            .container-fluid {
                padding: 0;
            }

            .dl-horizontal dt {
                float: none;
                clear: none;
                width: auto;
                text-align: left;
            }

            .dl-horizontal dd {
                margin-left: 0;
            }

            .container {
                width: auto;
            }

            .row-fluid {
                width: 100%;
            }

            .row, .thumbnails {
                margin-left: 0;
            }

            .thumbnails > li {
                float: none;
                margin-left: 0;
            }

            [class*="span"], .uneditable-input[class*="span"], .row-fluid [class*="span"] {
                float: none;
                display: block;
                width: 100%;
                margin-left: 0;
                -webkit-box-sizing: border-box;
                -moz-box-sizing: border-box;
                box-sizing: border-box;
            }

            .span12, .row-fluid .span12 {
                width: 100%;
                -webkit-box-sizing: border-box;
                -moz-box-sizing: border-box;
                box-sizing: border-box;
            }

            .row-fluid [class*="offset"]:first-child {
                margin-left: 0;
            }

            .input-large, .input-xlarge, .input-xxlarge, input[class*="span"], select[class*="span"], textarea[class*="span"], .uneditable-input {
                display: block;
                width: 100%;
                min-height: 30px;
                -webkit-box-sizing: border-box;
                -moz-box-sizing: border-box;
                box-sizing: border-box;
            }

            .input-prepend input, .input-append input, .input-prepend input[class*="span"], .input-append input[class*="span"] {
                display: inline-block;
                width: auto;
            }

            .controls-row [class*="span"] + [class*="span"] {
                margin-left: 0;
            }

            .modal {
                position: fixed;
                top: 20px;
                left: 20px;
                right: 20px;
                width: auto;
                margin: 0;
            }

            .modal.fade {
                top: -100px;
            }

            .modal.fade.in {
                top: 20px;
            }
        }

        @media (max-width: 480px) {
            .nav-collapse {
                -webkit-transform: translate3d(0, 0, 0);
            }

            .page-header h1 small {
                display: block;
                line-height: 20px;
            }

            input[type="checkbox"], input[type="radio"] {
                border: 1px solid #ccc;
            }

            .form-horizontal .control-label {
                float: none;
                width: auto;
                padding-top: 0;
                text-align: left;
            }

            .form-horizontal .controls {
                margin-left: 0;
            }

            .form-horizontal .control-list {
                padding-top: 0;
            }

            .form-horizontal .form-actions {
                padding-left: 10px;
                padding-right: 10px;
            }

            .media .pull-left, .media .pull-right {
                float: none;
                display: block;
                margin-bottom: 10px;
            }

            .media-object {
                margin-right: 0;
                margin-left: 0;
            }

            .modal {
                top: 10px;
                left: 10px;
                right: 10px;
            }

            .modal-header .close {
                padding: 10px;
                margin: -10px;
            }

            .carousel-caption {
                position: static;
            }
        }

        @media (min-width: 768px) and (max-width: 979px) {
            .row {
                margin-left: -20px;
                *zoom: 1;
            }

            .row:before, .row:after {
                display: table;
                content: "";
                line-height: 0;
            }

            .row:after {
                clear: both;
            }

            [class*="span"] {
                float: left;
                min-height: 1px;
                margin-left: 20px;
            }

            .container, .navbar-static-top .container, .navbar-fixed-top .container, .navbar-fixed-bottom .container {
                width: 724px;
            }

            .span12 {
                width: 724px;
            }

            .span11 {
                width: 662px;
            }

            .span10 {
                width: 600px;
            }

            .span9 {
                width: 538px;
            }

            .span8 {
                width: 476px;
            }

            .span7 {
                width: 414px;
            }

            .span6 {
                width: 352px;
            }

            .span5 {
                width: 290px;
            }

            .span4 {
                width: 228px;
            }

            .span3 {
                width: 166px;
            }

            .span2 {
                width: 104px;
            }

            .span1 {
                width: 42px;
            }

            .offset12 {
                margin-left: 764px;
            }

            .offset11 {
                margin-left: 702px;
            }

            .offset10 {
                margin-left: 640px;
            }

            .offset9 {
                margin-left: 578px;
            }

            .offset8 {
                margin-left: 516px;
            }

            .offset7 {
                margin-left: 454px;
            }

            .offset6 {
                margin-left: 392px;
            }

            .offset5 {
                margin-left: 330px;
            }

            .offset4 {
                margin-left: 268px;
            }

            .offset3 {
                margin-left: 206px;
            }

            .offset2 {
                margin-left: 144px;
            }

            .offset1 {
                margin-left: 82px;
            }

            .row-fluid {
                width: 100%;
                *zoom: 1;
            }

            .row-fluid:before, .row-fluid:after {
                display: table;
                content: "";
                line-height: 0;
            }

            .row-fluid:after {
                clear: both;
            }

            .row-fluid [class*="span"] {
                display: block;
                width: 100%;
                min-height: 30px;
                -webkit-box-sizing: border-box;
                -moz-box-sizing: border-box;
                box-sizing: border-box;
                float: left;
                margin-left: 2.7624309392265194%;
                *margin-left: 2.709239449864817%;
            }

            .row-fluid [class*="span"]:first-child {
                margin-left: 0;
            }

            .row-fluid .controls-row [class*="span"] + [class*="span"] {
                margin-left: 2.7624309392265194%;
            }

            .row-fluid .span12 {
                width: 100%;
                *width: 99.94680851063829%;
            }

            .row-fluid .span11 {
                width: 91.43646408839778%;
                *width: 91.38327259903608%;
            }

            .row-fluid .span10 {
                width: 82.87292817679558%;
                *width: 82.81973668743387%;
            }

            .row-fluid .span9 {
                width: 74.30939226519337%;
                *width: 74.25620077583166%;
            }

            .row-fluid .span8 {
                width: 65.74585635359117%;
                *width: 65.69266486422946%;
            }

            .row-fluid .span7 {
                width: 57.18232044198895%;
                *width: 57.12912895262725%;
            }

            .row-fluid .span6 {
                width: 48.61878453038674%;
                *width: 48.56559304102504%;
            }

            .row-fluid .span5 {
                width: 40.05524861878453%;
                *width: 40.00205712942283%;
            }

            .row-fluid .span4 {
                width: 31.491712707182323%;
                *width: 31.43852121782062%;
            }

            .row-fluid .span3 {
                width: 22.92817679558011%;
                *width: 22.87498530621841%;
            }

            .row-fluid .span2 {
                width: 14.3646408839779%;
                *width: 14.311449394616199%;
            }

            .row-fluid .span1 {
                width: 5.801104972375691%;
                *width: 5.747913483013988%;
            }

            .row-fluid .offset12 {
                margin-left: 105.52486187845304%;
                *margin-left: 105.41847889972962%;
            }

            .row-fluid .offset12:first-child {
                margin-left: 102.76243093922652%;
                *margin-left: 102.6560479605031%;
            }

            .row-fluid .offset11 {
                margin-left: 96.96132596685082%;
                *margin-left: 96.8549429881274%;
            }

            .row-fluid .offset11:first-child {
                margin-left: 94.1988950276243%;
                *margin-left: 94.09251204890089%;
            }

            .row-fluid .offset10 {
                margin-left: 88.39779005524862%;
                *margin-left: 88.2914070765252%;
            }

            .row-fluid .offset10:first-child {
                margin-left: 85.6353591160221%;
                *margin-left: 85.52897613729868%;
            }

            .row-fluid .offset9 {
                margin-left: 79.8342541436464%;
                *margin-left: 79.72787116492299%;
            }

            .row-fluid .offset9:first-child {
                margin-left: 77.07182320441989%;
                *margin-left: 76.96544022569647%;
            }

            .row-fluid .offset8 {
                margin-left: 71.2707182320442%;
                *margin-left: 71.16433525332079%;
            }

            .row-fluid .offset8:first-child {
                margin-left: 68.50828729281768%;
                *margin-left: 68.40190431409427%;
            }

            .row-fluid .offset7 {
                margin-left: 62.70718232044199%;
                *margin-left: 62.600799341718584%;
            }

            .row-fluid .offset7:first-child {
                margin-left: 59.94475138121547%;
                *margin-left: 59.838368402492065%;
            }

            .row-fluid .offset6 {
                margin-left: 54.14364640883978%;
                *margin-left: 54.037263430116376%;
            }

            .row-fluid .offset6:first-child {
                margin-left: 51.38121546961326%;
                *margin-left: 51.27483249088986%;
            }

            .row-fluid .offset5 {
                margin-left: 45.58011049723757%;
                *margin-left: 45.47372751851417%;
            }

            .row-fluid .offset5:first-child {
                margin-left: 42.81767955801105%;
                *margin-left: 42.71129657928765%;
            }

            .row-fluid .offset4 {
                margin-left: 37.01657458563536%;
                *margin-left: 36.91019160691196%;
            }

            .row-fluid .offset4:first-child {
                margin-left: 34.25414364640884%;
                *margin-left: 34.14776066768544%;
            }

            .row-fluid .offset3 {
                margin-left: 28.45303867403315%;
                *margin-left: 28.346655695309746%;
            }

            .row-fluid .offset3:first-child {
                margin-left: 25.69060773480663%;
                *margin-left: 25.584224756083227%;
            }

            .row-fluid .offset2 {
                margin-left: 19.88950276243094%;
                *margin-left: 19.783119783707537%;
            }

            .row-fluid .offset2:first-child {
                margin-left: 17.12707182320442%;
                *margin-left: 17.02068884448102%;
            }

            .row-fluid .offset1 {
                margin-left: 11.32596685082873%;
                *margin-left: 11.219583872105325%;
            }

            .row-fluid .offset1:first-child {
                margin-left: 8.56353591160221%;
                *margin-left: 8.457152932878806%;
            }

            input, textarea, .uneditable-input {
                margin-left: 0;
            }

            .controls-row [class*="span"] + [class*="span"] {
                margin-left: 20px;
            }

            input.span12, textarea.span12, .uneditable-input.span12 {
                width: 710px;
            }

            input.span11, textarea.span11, .uneditable-input.span11 {
                width: 648px;
            }

            input.span10, textarea.span10, .uneditable-input.span10 {
                width: 586px;
            }

            input.span9, textarea.span9, .uneditable-input.span9 {
                width: 524px;
            }

            input.span8, textarea.span8, .uneditable-input.span8 {
                width: 462px;
            }

            input.span7, textarea.span7, .uneditable-input.span7 {
                width: 400px;
            }

            input.span6, textarea.span6, .uneditable-input.span6 {
                width: 338px;
            }

            input.span5, textarea.span5, .uneditable-input.span5 {
                width: 276px;
            }

            input.span4, textarea.span4, .uneditable-input.span4 {
                width: 214px;
            }

            input.span3, textarea.span3, .uneditable-input.span3 {
                width: 152px;
            }

            input.span2, textarea.span2, .uneditable-input.span2 {
                width: 90px;
            }

            input.span1, textarea.span1, .uneditable-input.span1 {
                width: 28px;
            }
        }

        @media (min-width: 1200px) {
            .row {
                margin-left: -30px;
                *zoom: 1;
            }

            .row:before, .row:after {
                display: table;
                content: "";
                line-height: 0;
            }

            .row:after {
                clear: both;
            }

            [class*="span"] {
                float: left;
                min-height: 1px;
                margin-left: 30px;
            }

            .container, .navbar-static-top .container, .navbar-fixed-top .container, .navbar-fixed-bottom .container {
                width: 1170px;
            }

            .span12 {
                width: 1170px;
            }

            .span11 {
                width: 1070px;
            }

            .span10 {
                width: 970px;
            }

            .span9 {
                width: 870px;
            }

            .span8 {
                width: 770px;
            }

            .span7 {
                width: 670px;
            }

            .span6 {
                width: 570px;
            }

            .span5 {
                width: 470px;
            }

            .span4 {
                width: 370px;
            }

            .span3 {
                width: 270px;
            }

            .span2 {
                width: 170px;
            }

            .span1 {
                width: 70px;
            }

            .offset12 {
                margin-left: 1230px;
            }

            .offset11 {
                margin-left: 1130px;
            }

            .offset10 {
                margin-left: 1030px;
            }

            .offset9 {
                margin-left: 930px;
            }

            .offset8 {
                margin-left: 830px;
            }

            .offset7 {
                margin-left: 730px;
            }

            .offset6 {
                margin-left: 630px;
            }

            .offset5 {
                margin-left: 530px;
            }

            .offset4 {
                margin-left: 430px;
            }

            .offset3 {
                margin-left: 330px;
            }

            .offset2 {
                margin-left: 230px;
            }

            .offset1 {
                margin-left: 130px;
            }

            .row-fluid {
                width: 100%;
                *zoom: 1;
            }

            .row-fluid:before, .row-fluid:after {
                display: table;
                content: "";
                line-height: 0;
            }

            .row-fluid:after {
                clear: both;
            }

            .row-fluid [class*="span"] {
                display: block;
                width: 100%;
                min-height: 30px;
                -webkit-box-sizing: border-box;
                -moz-box-sizing: border-box;
                box-sizing: border-box;
                float: left;
                margin-left: 2.564102564102564%;
                *margin-left: 2.5109110747408616%;
            }

            .row-fluid [class*="span"]:first-child {
                margin-left: 0;
            }

            .row-fluid .controls-row [class*="span"] + [class*="span"] {
                margin-left: 2.564102564102564%;
            }

            .row-fluid .span12 {
                width: 100%;
                *width: 99.94680851063829%;
            }

            .row-fluid .span11 {
                width: 91.45299145299145%;
                *width: 91.39979996362975%;
            }

            .row-fluid .span10 {
                width: 82.90598290598291%;
                *width: 82.8527914166212%;
            }

            .row-fluid .span9 {
                width: 74.35897435897436%;
                *width: 74.30578286961266%;
            }

            .row-fluid .span8 {
                width: 65.81196581196582%;
                *width: 65.75877432260411%;
            }

            .row-fluid .span7 {
                width: 57.26495726495726%;
                *width: 57.21176577559556%;
            }

            .row-fluid .span6 {
                width: 48.717948717948715%;
                *width: 48.664757228587014%;
            }

            .row-fluid .span5 {
                width: 40.17094017094017%;
                *width: 40.11774868157847%;
            }

            .row-fluid .span4 {
                width: 31.623931623931625%;
                *width: 31.570740134569924%;
            }

            .row-fluid .span3 {
                width: 23.076923076923077%;
                *width: 23.023731587561375%;
            }

            .row-fluid .span2 {
                width: 14.52991452991453%;
                *width: 14.476723040552828%;
            }

            .row-fluid .span1 {
                width: 5.982905982905983%;
                *width: 5.929714493544281%;
            }

            .row-fluid .offset12 {
                margin-left: 105.12820512820512%;
                *margin-left: 105.02182214948171%;
            }

            .row-fluid .offset12:first-child {
                margin-left: 102.56410256410257%;
                *margin-left: 102.45771958537915%;
            }

            .row-fluid .offset11 {
                margin-left: 96.58119658119658%;
                *margin-left: 96.47481360247316%;
            }

            .row-fluid .offset11:first-child {
                margin-left: 94.01709401709402%;
                *margin-left: 93.91071103837061%;
            }

            .row-fluid .offset10 {
                margin-left: 88.03418803418803%;
                *margin-left: 87.92780505546462%;
            }

            .row-fluid .offset10:first-child {
                margin-left: 85.47008547008548%;
                *margin-left: 85.36370249136206%;
            }

            .row-fluid .offset9 {
                margin-left: 79.48717948717949%;
                *margin-left: 79.38079650845607%;
            }

            .row-fluid .offset9:first-child {
                margin-left: 76.92307692307693%;
                *margin-left: 76.81669394435352%;
            }

            .row-fluid .offset8 {
                margin-left: 70.94017094017094%;
                *margin-left: 70.83378796144753%;
            }

            .row-fluid .offset8:first-child {
                margin-left: 68.37606837606839%;
                *margin-left: 68.26968539734497%;
            }

            .row-fluid .offset7 {
                margin-left: 62.393162393162385%;
                *margin-left: 62.28677941443899%;
            }

            .row-fluid .offset7:first-child {
                margin-left: 59.82905982905982%;
                *margin-left: 59.72267685033642%;
            }

            .row-fluid .offset6 {
                margin-left: 53.84615384615384%;
                *margin-left: 53.739770867430444%;
            }

            .row-fluid .offset6:first-child {
                margin-left: 51.28205128205128%;
                *margin-left: 51.175668303327875%;
            }

            .row-fluid .offset5 {
                margin-left: 45.299145299145295%;
                *margin-left: 45.1927623204219%;
            }

            .row-fluid .offset5:first-child {
                margin-left: 42.73504273504273%;
                *margin-left: 42.62865975631933%;
            }

            .row-fluid .offset4 {
                margin-left: 36.75213675213675%;
                *margin-left: 36.645753773413354%;
            }

            .row-fluid .offset4:first-child {
                margin-left: 34.18803418803419%;
                *margin-left: 34.081651209310785%;
            }

            .row-fluid .offset3 {
                margin-left: 28.205128205128204%;
                *margin-left: 28.0987452264048%;
            }

            .row-fluid .offset3:first-child {
                margin-left: 25.641025641025642%;
                *margin-left: 25.53464266230224%;
            }

            .row-fluid .offset2 {
                margin-left: 19.65811965811966%;
                *margin-left: 19.551736679396257%;
            }

            .row-fluid .offset2:first-child {
                margin-left: 17.094017094017094%;
                *margin-left: 16.98763411529369%;
            }

            .row-fluid .offset1 {
                margin-left: 11.11111111111111%;
                *margin-left: 11.004728132387708%;
            }

            .row-fluid .offset1:first-child {
                margin-left: 8.547008547008547%;
                *margin-left: 8.440625568285142%;
            }

            input, textarea, .uneditable-input {
                margin-left: 0;
            }

            .controls-row [class*="span"] + [class*="span"] {
                margin-left: 30px;
            }

            input.span12, textarea.span12, .uneditable-input.span12 {
                width: 1156px;
            }

            input.span11, textarea.span11, .uneditable-input.span11 {
                width: 1056px;
            }

            input.span10, textarea.span10, .uneditable-input.span10 {
                width: 956px;
            }

            input.span9, textarea.span9, .uneditable-input.span9 {
                width: 856px;
            }

            input.span8, textarea.span8, .uneditable-input.span8 {
                width: 756px;
            }

            input.span7, textarea.span7, .uneditable-input.span7 {
                width: 656px;
            }

            input.span6, textarea.span6, .uneditable-input.span6 {
                width: 556px;
            }

            input.span5, textarea.span5, .uneditable-input.span5 {
                width: 456px;
            }

            input.span4, textarea.span4, .uneditable-input.span4 {
                width: 356px;
            }

            input.span3, textarea.span3, .uneditable-input.span3 {
                width: 256px;
            }

            input.span2, textarea.span2, .uneditable-input.span2 {
                width: 156px;
            }

            input.span1, textarea.span1, .uneditable-input.span1 {
                width: 56px;
            }

            .thumbnails {
                margin-left: -30px;
            }

            .thumbnails > li {
                margin-left: 30px;
            }

            .row-fluid .thumbnails {
                margin-left: 0;
            }
        }
    </style>
</head>
<body style="width:100%;height: 100%; padding: 0px 0px 25px 0px; box-sizing: border-box ;position:fixed;">

<div style="width: 100%; height:100%;">
    <div class="row" style="width: 100%; height:100%;">
        <div style="width: 100%; height:100%;">
            <div id="main" data-wgo="" style="width:100%;height:934px;margin: 0px 0px 0px 20px">
                当前浏览器不支持WGo.js,<a id="main4" href="">直接点击下载SGF棋谱</a>
            </div>
            <div id="last" style="height:25px;padding: 0px 0px 0px 20px">
                <button id="copyUrl" class="downbutton" style="height: 22px;" data-clipboard-target="#copyUrl" data-clipboard-action="copy" onClick="copyUrl()">复制链接</button>
                   <button class="downbutton" style="height: 22px" onclick="opens()">本地棋谱</button>
                <a id="main2" href="" download="" style="display: none">下载棋谱</a>
                <button class="downbutton" style="height: 22px;" onclick="download()">下载棋谱</button>
                <a href="https://apps.apple.com/cn/app/katago/id1509047602?l=zh&ls=1">苹果手机下载app</a> 
                 选点说明:<font color="#00008b">蓝色</font>><font color="green">绿色</font>><font color="orange">橙色</font>,上方胜率,下方目差/计算量,<font color="#6495ed">青色</font>-胜率曲线,<font color="#663399">紫色</font>-目差曲线,<font color="purple">苹果IOS13</font>请升级最新版本,电脑端可用滚轮控制变化图
                </div>
            <div style=" height:0px; overflow:hidden; position:absolute;">
                <input type="file" id="up" onchange="check()"/></div></div>
                <script>
                    function download() {
                        var o = document.getElementById("main2");
                        o.click();
                    }
                    function copyUrl(){

                            var clipboard = new ClipboardJS('#copyUrl', {
                                text: function() {
                                    return window.location.href;
                                }
                            });
                            clipboard.on("success", function(e) {
                               // console.log("ok");
                                alert("链接复制成功,黏贴即可分享");
                                clipboard.destroy();
                            });
                            clipboard.on("error", function(e) {
                                alert("链接复制失败,请手动复制分享");
                            });
                            document.getElementById('copyUrl').click();  //解决clipboard二次点击生效问题
                            clipboard.destroy();

                        };
                    function opens() {
                        //alert(1);
                        var objFile = document.getElementById("up");
                        objFile.click();
                    }
                    function check() {
                        var objFile = document.getElementById("up");
                        if (objFile.value == "") {
                            return false;
                        }
                        var files = $('#up').prop('files');
                        if (files.length == 0) {
                            alert('请选择文件');
                        } else {
                            var reader = new FileReader();
                            reader.readAsText(files[0], "utf-8");
                            reader.onload = function (evt) {
                                var fileString = evt.target.result;
                                WGo.isKataData = false;
                                var o = document.getElementById("main");
                                o.setAttribute("data-wgo", fileString);
                                var pl_elems = document.querySelectorAll("[data-wgo],[data-wgo-diagram]");
                                WGo.dz=false;
                                WGo.KW=false;
                                WGo.KB=false;
                                for (var i = 0; i < pl_elems.length; i++) {
                                    WGo.player_from_tag(pl_elems[i]);
                                }
                                WGo.maxScoreMean=20;
                                if(WGo.editMode)
                                {WGo.tryPlay.element.innerText = "试下";
                                WGo.clickedMC=false;}
                                WGo.drawWinrate();
                            }
                        }
                    }

                </script>
            </div>
        </div>
    </div>
</div>
</body>
</html>